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What is GUI? 


Graphical User Interface (GUI) 
aka Head-Up Display (HUD) 


e Displays information 


* Handles interaction 
e Mouse, touch, keyboard, other controllers... 


Implementation 


1. Default system controls 
e (Used in desktop apps) 
e Pure system API: WinAPlI 2, 
e C++ library: Qt, wxWidgets, ... 
e Another programming language: CH, Java, ... 


General Advanced Plugins Load/Save 


Search for: 
Search in: [ca 
[] RegEx Only search in selected directores Files 
[] Eventhing' [_] Search archives (all except for UC2) 
Search in subdirectonies: all (unlimited depth) v 
Find text: 
[7] Whole words only ANSI charset (Windows) 
[Case sensitive [] ASCII charset (DOS) 
LD] RegEx (2) [] Unicode UTF16 
(Hex OQ uTF8 
[] Find files NOT containing the text [] Office xml (docx, xlsx, odt etc) 


+ [[] Plugins: 


Implementation 


Default system controls 


Custom rendering 

e (Used in games, graphics apps) 

e Library: Scaleform, Dear ImGui, ... 
e Your own implementation 


Render Presets 


Architecture 


Object-oriented — seems to be the most natural 
architecture for GUI 


e Class hierarchy for types of controls 

e Design patterns, e.g. composite 

e Fields: Position, Size, ... 

e Methods: Show, Hide, Enable, Disable, ... 


Architecture 


Object-oriented — seems to be the most natural 
architecture for GUI 


Example 


Statystyki 
Zabawa czcionka Frame=7828, FPS=60.0138 


Draws=173, Primitives=3490 
Tekst Hello World! Resources=9, Loaded=1, Locked=7 


a Phys Mem=43%, TexFree=485MB 
Czcionka Arial Bold | v  Kolor a 
Poziomo ej Lewo J Srodek y Prawo 
Pionowo ej Góra 3 Srodek 3 Dót 
Zawijanie  _) Jedna linia _y Normalnie e) Siowa y Znaki 
Ustawienia | Kreslenia y Podkreslenie [EJ Podwójne a] Nadkreslenie Ej Przekreslenie 


Adapter 


Przegladarka plików 


Device Ty; Nazwa Rozmiar [Data modyfikacji 


Back Buffe in Developer Runtime <DIR> 2006-09-26 16:37:34 


Back Buffe 


En Include <DIR> 2006-09-26 16:37:31 
Multi Sam¡ li 

En Lib <DIR> 2006-09-26 16:37:32 
bo > Samples <DIR> 2006-09-26 16:37:28 


Vertex Processing AUTO in Utilities <DIR> 2006-09-26 16:35:34 


Back Buffer Count 2 


Swap Effect DISCARD KA 
Presentantion Interval DEFAULT y 


oK ' Anuluj Zastosuj 


Some thoughts 


e Actual objects also form a hierarchy 
e Every control is positioned relative to ¡ts parent 


e Similar to how games represent scene 


e High-level approach found in game engines — 
hiearchy of objects 


= Word Outliner 


A 
Label Es Type 
> 442 Minimal_Default 
A Mi Audio 
Y Starter Background_Cue AmbientSound Die 
4 My GamePlayActors Folder 
a Player Start PlayerStart Playel 
4 y Lights Folder 
2% Light Source DirectionalLight Directiona 
d My ReflectionCaptureActors Fold 
£% SphereReflectionCaptureSphereReflectionCapture Sphel 
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Immediate mode GUI -— idea 


e On low level (DirectX, OpenGL, Vulkan), rendering is 
stateless — ,immediate mode” 


e Sequence of draw calls repeated every frame 


SetShader 
SetTexture 
DrawTriangles 
SetTexture 
DrawTriangles 


e What if... we could render GUI this way? 


Dear ImGui 


* https://github.com/ocornut/imgui 


e C++ library 
e Bindings to many languages available 
e License: MIT 
e Author: Omar Cornut (game developer) 
e Suited for real-time rendering 


e Efficient 
e Graphics API agnostic 


Example code 


if(ImGui::Begin("First Window")) 


¡ 


ImGui: 
ImGui: 
ImGui: 


ImGui: 


:¿Text("Do you like it?”); 
:Button("Yes”); 
:Button("No”>); 
:End(); 


Y First Mindo 


Mm you like 3E? 


Q: How are controls positioned? 


e Automatic — each control in new row 


e You can change this: 
e PushltemWidth(item_width), SameLine() 
e Columns: Columns(count) 
e Grouping: BeginGroup(), EndGroup() 
e Full control: GetCursorPos(), SetCursorPos(local_pos) 
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DDDD DODD DODE DODE 


Q: How do | handle feedback? 


You receive it the same moment you define a contro! 


ImGui::Text("Do you really want to quit?")>); 
if(ImGui::Button("Yes”)) 

ExitProgram(); 
if(ImGui::Button("No”)) 

CloseThisWindow(); 


Q: Where is value of controls? 


e In your own variables 
e You pass pointers to them as you define controls 


float volume = 0.7f; 
bool mute = true; 


ImGui::SliderFloat("Volume”, 8€volume, 0.0f, 1.04); 
ImGui::Checkbox("Mute", mute); 


Y First Aindow 
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|| Mute 


Q: How about other state? 


* There is other state 
e Window position é: size, focus, text selection, ... 
e Kept inside ImGui library 
e So it's not truly stateless... 
e Controls are identified by hash from their labels 


e If not unique, you can use "LabelHHUNIQUE_ID" 
e You can also scope your labels: PushID(), PopID() 


Q: How to render”? 


e If your frame has Update() and Render(): 
e Do all ImGui inside Update() 
e Inside Render() you must render it yourself 


e For rendering you receive a sequence of: 
e Vertex array 
e Index array 
e Texture ID 
e Scissor rectangle 


e Examples available for: DirectX 9, 10, 11, OpenGL, 
Vulkan, Allegro, ... 


Features: Property grio 


e Suited to provide editing of properties of various 
types 
e bool, int, float, string, enum 
* vec?2, vec3, vec4, color 


Features: Fonts 


e Supports TTF fonts, loaded into atlas texture 


e You receive data for this texture, 
need to upload it to GPU by yourself 
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Live demo 


Conclusion 


e Dear ImGui is good for: 
e Internal in-game GUI for debugging purposes 
e Easy to use 
e Efficient to render 
e Dear ImGui is not good for: 
e Fully-featured game editor 
e Not well suited for complicated GUI, better use system controls 
e Final game HUD 
e No possibility of skinning or making it look pretty 
e You can always make your own implementation 
* Based on idea of Immediate Mode GUI! 


Thank you 


Questions? 


